<!--
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

 http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
-->
<div class="import">
    <section class="edit-card-credentials">
        <h1>Create Business Network Card</h1>
        <section class="profiles section">
            <div class="description upper"><b>Provide security credentials</b></div>
            <div>
                <p>You must provide one of two types of credential to create a business network card:</p>
                <credentials (credentials)="updateCredentials($event)"></credentials>
            </div>
        </section>
        <section class="profiles">
            <div class="description upper"><b>Card Type</b></div>
            <div class="holding-div">
                <div class="create-route">
                    <p>What type of card do you want to create?</p>
                    <div class="file-types-list">
                        <div class="file-types-list-item">
                            <input type="radio" id="participantCard" name="participant-type" [checked]="true"
                                   (change)="useParticipantCardType(true)">
                            <label class="radio-label" for="participantCard"><h3>Participant Card</h3></label>
                            <div class="description"><p>A business network card that can be used to connect a business
                                network.</p></div>
                        </div>
                        <div class="file-types-list-item">
                            <input type="radio" id="adminCard" name="participant-type"
                                   (change)="useParticipantCardType(false)">
                            <label class="radio-label" for="adminCard"><h3>Admin Card</h3></label>
                            <div class="description"><p>A business network card that can be used to install and start
                                a business network.</p></div>
                        </div>
                    </div>
                </div>

                <div *ngIf="useParticipantCard" class="noCerts">
                    <p>The name of the Business Network to which you are going to connect.</p>
                    <form #busNetForm="ngForm" (submit)="submitCard()" (keydown)="submitCard($event)">
                        <table class="no-shadow">
                            <colgroup>
                                <col span="1" style="width: 20%;">
                                <col span="1" style="width: 80%;">
                            </colgroup>
                            <tr>
                                <th>
                                    <label for="busNetName"><h3>Name of Business Network</h3></label>
                                </th>
                                <td>
                                    <input type="text" [(ngModel)]="busNetName" id="busNetName" name="busNetName"
                                           autocomplete="off">
                                </td>
                            </tr>
                        </table>
                        <p>Give the business network card that will be created a name</p>
                        <table class="no-shadow">
                            <colgroup>
                                <col span="1" style="width: 20%;">
                                <col span="1" style="width: 80%;">
                            </colgroup>
                            <tr>
                                <th>
                                    <label for="cardName"><h3>Name of the card</h3></label>
                                </th>
                                <td>
                                    <input type="text" [ngModel]="cardName" id="cardName" name="cardName"
                                           (ngModelChange)="setCardName($event)"
                                           autocomplete="off">
                                    <div *ngIf="!cardNameValid" class="error-message">The card name must be unique</div>
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
                <div *ngIf="!useParticipantCard" class="roles">
                    <p>Roles can be added to an identity for installing and starting a business network.</p>
                    <div class="role-list">
                        <div class="option">
                            <input type="checkbox" [(ngModel)]="peerAdmin" id="peerAdmin" name="peerAdmin"
                                   autocomplete="off">
                            <label for="peerAdmin" class="checkbox-label"><h3>Peer Admin</h3></label>
                            <div class="description"><p>A role that has permission to install a business network</p>
                            </div>
                        </div>
                        <div class="option">
                            <input type="checkbox" [(ngModel)]="channelAdmin" id="channelAdmin" name="channelAdmin"
                                   autocomplete="off">
                            <label for="channelAdmin" class="checkbox-label"><h3>Channel Admin</h3></label>
                            <div class="description"><p>A role that has permission to start a business network</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <footer>
            <button type="button" class="secondary" (click)="close();">
                <span>Cancel</span>
            </button>
            <button type="button" class="primary" [disabled]="!validContents() ||  addInProgress"
                    (click)="addIdentityCard();">
                <div *ngIf="!addInProgress">
                    <span>Create</span>
                </div>
                <div *ngIf="addInProgress" class="ibm-spinner-indeterminate small loop">
                    <div class="loader">
                        <svg class="circular" viewBox="25 25 50 50">
                            <circle class="circle-path" cx="50" cy="50" r="20"/>
                        </svg>
                    </div>
                </div>
            </button>
        </footer>
    </section>
</div>

